<script setup lang="ts" name="MenuGridProperty">
import { usePropertyForm } from '@/components/Designer/utils/index'
import { EMPTY_MENU_GRID_ITEM_PROPERTY, MenuGridProperty } from './config'

/** 宫格导航属性面板 */

const props = defineProps<{ modelValue: MenuGridProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)
</script>

<template>
  <MallProperty v-model="formData.style">
    <!-- 表单 -->
    <ElForm label-width="80px" :model="formData" class="m-t-8px">
      <ElFormItem label="每行数量" prop="column">
        <ElRadioGroup v-model="formData.column">
          <ElRadio :label="3">3个</ElRadio>
          <ElRadio :label="4">4个</ElRadio>
        </ElRadioGroup>
      </ElFormItem>

      <ElCard header="菜单设置" class="property-group" shadow="never">
        <Draggable v-model="formData.list" :empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY">
          <template #default="{ element }">
            <ElFormItem label="图标" prop="iconUrl">
              <UploadImage v-model="element.iconUrl" height="80px" width="80px">
                <template #tip> 建议尺寸：44 * 44 </template>
              </UploadImage>
            </ElFormItem>
            <ElFormItem label="标题" prop="title">
              <InputColorPicker v-model="element.title" v-model:color="element.titleColor" />
            </ElFormItem>
            <ElFormItem label="副标题" prop="subtitle">
              <InputColorPicker v-model="element.subtitle" v-model:color="element.subtitleColor" />
            </ElFormItem>
            <ElFormItem label="链接" prop="url">
              <MallAppLinkInput v-model="element.url" />
            </ElFormItem>
            <ElFormItem label="显示角标" prop="badge.show">
              <ElSwitch v-model="element.badge.show" />
            </ElFormItem>
            <template v-if="element.badge.show">
              <ElFormItem label="角标内容" prop="badge.text">
                <InputColorPicker v-model="element.badge.text" v-model:color="element.badge.textColor" />
              </ElFormItem>
              <ElFormItem label="背景颜色" prop="badge.bgColor">
                <ColorInput v-model="element.badge.bgColor" />
              </ElFormItem>
            </template>
          </template>
        </Draggable>
      </ElCard>
    </ElForm>
  </MallProperty>
</template>

<style scoped lang="scss"></style>
